buttons and icons

2 files changed, 16 insertions, 20 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 527c814b..29bf7943 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -41,13 +41,9 @@
     </div>
 
     <a href={`/account/savings`} class="contents">
-      <button class="btn btn-primary">
-        <div class="mx-auto flex gap-2">
-          <Icon icon="plus" style="w-8 mx-auto" />
-          <div class="my-auto text-xl whitespace-nowrap">
-            {$t("accounts.addAccount")}
-          </div>
-        </div>
+      <button class="btn btn-lg w-full rounded-2xl whitespace-nowrap">
+        <iconify-icon icon="ph:plus-circle-bold" width="32" />
+        {$t("accounts.addAccount")}
       </button>
     </a>
 
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 2a0cb6b3..0f36f0fe 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -141,10 +141,10 @@
   <div class="text-secondary space-y-2 text-xl pt-2">
     <button
       type="button"
-      class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
+      class="flex gap-2 items-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
       on:click={() => copy(txt)}
     >
-      <Icon icon="copy" style="w-8 my-auto" />
+      <iconify-icon icon="ph:copy-bold" width="32" />
       <div class="my-auto">
         {$t("payments.copy")}
       </div>
@@ -152,10 +152,10 @@
 
     {#if user?.id === invoice?.user?.id}
       <button
-        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+        class="w-full flex justify-center items-center gap-2 rounded-2xl border py-5 px-6 hover:opacity-80"
         on:click={toggleAmount}
       >
-        <Icon icon="edit" style="mr-1 w-8" />
+        <iconify-icon icon="ph:pencil-bold" width="32" />
         <div class="my-auto">{$t("payments.setAmount")}</div>
       </button>
     {:else}
@@ -173,8 +173,8 @@
   {#if aid === user.id}
     <div class="grid grid-cols-2 justify-around text-secondary">
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.bitcoin}
+        class="hover:bg-base-200 my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        class:bg-base-200={type === types.bitcoin}
         class:text-black={type === types.bitcoin}
         on:click={() => setType(types.bitcoin)}
       >
@@ -183,8 +183,8 @@
       </button>
 
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.liquid}
+        class="hover:bg-base-200 my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        class:bg-base-200={type === types.liquid}
         class:text-black={type === types.liquid}
         on:click={() => setType(types.liquid)}
       >
@@ -193,12 +193,12 @@
       </button>
 
       <button
-        class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.lightning}
+        class="hover:bg-base-200 flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        class:bg-base-200={type === types.lightning}
         class:text-black={type === types.lightning}
         on:click={() => setType(types.lightning)}
       >
-        <div class="bg-white rounded-full w-8 h-8 text-center flex">
+        <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
           <div class="m-auto">⚡️</div>
         </div>
         <div class="my-auto text-lg">Lightning</div>
@@ -207,7 +207,7 @@
       {#if user?.id === invoice?.user?.id}
         <a href={`/receive`} class="block contents">
           <button
-            class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+            class="hover:bg-base-200 flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
           >
             <img src="/images/cash.png" class="w-8 my-auto" />
             <div class="my-auto text-lg">Ecash</div>
@@ -233,7 +233,7 @@
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
   >
     <div
-      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-white space-y-5 top-5"
+      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-base-100 space-y-5 top-5"
     >
       <form on:submit|preventDefault={setAmount} class="space-y-5">
         <Numpad